<template>
  <div class="layout">
    <div class="layout-ceiling">
      <div class="layout-ceiling-main">
        <div class="logo">
          <img src="./logo_white.png" alt="" height="100%">
        </div>
        <div class="right-section">
          <div class="label">当前账户：</div>
          <div class="account-name">{{$store.state.user.company}}</div>
          <a href="javascript:;" class="logout" @click="logout">退出</a>
        </div>
      </div>
    </div>
    <div class="layout-main-content">
      <div class="layout-menu-left">
        <Menu :active-name="$route.path" theme="light" width="auto" @on-select="changeMenu" class="clearfix">
          <MenuGroup title="广告">
            <MenuItem name="/home/ad">
            <Icon type="document-text"></Icon>
            广告列表
            </MenuItem>
          </MenuGroup>
          <MenuGroup title="客户">
            <MenuItem name="/home/client">
            <Icon type="document-text"></Icon>
            客户管理
            </MenuItem>
          </MenuGroup>
          <MenuGroup title="数据">
            <MenuItem name="/home/data/adData">
            <Icon type="stats-bars"></Icon>
            广告数据
            </MenuItem>
            <MenuItem name="/home/data/custData">
            <Icon type="stats-bars"></Icon>
            客户数据
            </MenuItem>
          </MenuGroup>
          <MenuGroup title="财务">
            <MenuItem name="/home/finance/finRecord">
            <Icon type="social-yen"></Icon>
            财务记录
            </MenuItem>
            <MenuItem name="/home/finance/balance">
            <Icon type="calendar"></Icon>
            余额管理
            </MenuItem>
          </MenuGroup>
          <MenuGroup title="账号">
            <MenuItem name="/home/accounts/accountsMess">
            <Icon type="person"></Icon>
            账号信息
            </MenuItem>
            <MenuItem name="/home/accounts/safety">
            <Icon type="locked"></Icon>
            密码安全
            </MenuItem>
          </MenuGroup>
        </Menu>
        <!-- <div class="contact-time">
                <div class="contact">
                  <h3>联系我们</h3>
                  <p>QQ: 1548414378</p>
                  <p>电话: 020-85289927</p>
                </div>
                <div class="time">
                  <h3>工作时间</h3>
                  <p>10:00-12:00</p>
                  <p>14:00-18:00</p>
                </div>
              </div> -->
      </div>
      <div class="layout-content-right">
        <router-view></router-view>
        <div class="layout-copy">
          2017-2018 &copy; 顶效广告平台
        </div>
      </div>
    </div>
    <Modal v-model="modal" title="退出当前账户？？" @on-ok="clickOK" width="350">
      <p>您是否确定退出当前账户？？如是请点击确认；如否请点击取消</p>
    </Modal>
  </div>
</template>
<script>
import * as types from '../../store/mutation-types';
export default {
  data() {
    return {
      spanLeft: 3,
      spanRight: 21,
      modal: false
    };
  },
  mounted() {},
  methods: {
    logout() {
      this.modal = true;
      this.$store.commit(types.LOGOUT);
      this.$router.push({
        path: '/'
      });
    },
    changeMenu(name) {
      this.$router.push({
        path: name
      });
    },
    clickOK() {
      this.$store.commit(types.LOGOUT);
      this.$router.push({
        path: '/'
      });
    }
  }
};
</script>
<style lang="stylus">
html
  background #f0f0f0

.layout
  background #f0f0f0
  position relative
  overflow hidden

  .layout-ceiling
    position fixed
    top 0
    left 0
    right 0
    z-index 999
    height 60px
    line-height 60px
    background-image linear-gradient(to right, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%)
    padding 10px 0
    overflow hidden
    user-select none

  .logo
    float left
    margin-left 20px
    height 40px

  .right-section
    float right
    margin-right 20px
    height 40px
    font-size 14px
    color #ffffff

    .label, .account-name, .logout
      float left
      height 100%
      line-height 40px

    .account-name
      margin-left 10px

    .logout
      margin-left 20px
      color #ffffff

  .layout-main-content
    margin-top 60px

  .layout-menu-left
    position fixed
    width 190px
    height 100%
    background #ffffff
    box-shadow 1px 0 20px rgba(0, 0, 0, 0.08)

    .contact-time
      width 90%
      background #f7f7f7
      border-radius 3px
      border 1px solid #dddee1
      margin 220px auto 20px
      color #495060
      text-align left
      line-height 30px
      overflow hidden

    .contact, .time
      padding 10px 15px

  .layout-content-right
    min-height 300px
    margin-left 190px

  .layout-copy
    text-align center
    padding 10px 0 20px
    color #9ea7b4

/* 以下为公共样式 */
.ivu-col
  transition width 0.2s ease-in-out

.main-content
  padding 15px

.page-wrapper
  padding 20px 20px
  float right

.ivu-menu-vertical.ivu-menu-light:after
  display none

.layout-breadcrumb
  padding 10px 15px

.layout-content
  background #fff
  border-radius 4px

.layout-content-main
  padding 0px 0px

.layout-content-main .header
  margin 0 10px 20px

.clearfix:after
  content:""; 
  display: block; 
  clear:both; 
</style>
